<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%"
    border
    header-cell-class-name="table_header"
    :header-cell-style="{ background: '#f8f8f9' }"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="date" label="序号" width="180" align="center" />
    <el-table-column prop="name" label="分组" width="180" align="center" />
    <el-table-column
      prop="address"
      label="字段编码"
      width="180"
      align="center"
    />
    <el-table-column
      prop="address"
      label="字段类型"
      width="180"
      align="center"
    />
    <el-table-column
      label="字段名称"
      prop="address"
      width="180"
      align="center"
    />
    <el-table-column
      label="字段名称l18nKey"
      prop="address"
      width="180"
      align="center"
    />
    <el-table-column label="默认值" prop="address" width="180" align="center" />
    <el-table-column
      label="数据字典编码"
      prop="address"
      width="180"
      align="center"
    />
    <el-table-column
      label="此项为必填项"
      prop="address"
      width="180"
      align="center"
    />
    <el-table-column
      label="帮助说明"
      prop="address"
      width="180"
      align="center"
    />
    <el-table-column
      label="开发配置"
      prop="address"
      width="180"
      align="center"
    />
  </el-table>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

let multipleSelection = ref([]);
// 多选项
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
</script>

<style lang="scss" scoped></style>
